<template>
  <div class="VCoordinate">
    <template v-for="(item, index) in dataList">
      <div v-if="index < showNum" class="VCoordinate-item">
        <div class="VCoordinate-item-block">
          <div class="VCoordinate-label" :style="{ width: `${width}px` }">经度：</div>
          <div class="VCoordinate-value">{{ item.longitude }}</div>
        </div>
        <div class="VCoordinate-item-block">
          <div class="VCoordinate-label" :style="{ width: `${width}px` }">纬度：</div>
          <div class="VCoordinate-value">{{ item.latitude }}</div>
        </div>
      </div>
    </template>

    <div class="VCoordinate-omit" v-if="dataList.length > showNum">
      一共{{ dataList.length }}条数据...
    </div>
  </div>
</template>

<script setup lang="ts">

const props = defineProps({
  dataList: {
    type: Array as any,
    default: [],
  },
  width: {
    type: Number,
    default: 50,
  },
  showNum: {
    type: Number,
    default: 10,
  },
})
const { width } = props

</script>

<style lang="scss" scoped>
.VCoordinate {
  margin-bottom: 15px;
  display: flex;
  font-size: 14px;
  flex-direction: column;
  width: 100%;

  .VCoordinate-omit {
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
  }

  .VCoordinate-item {
    display: flex;
    background: #F5F5F5;
    margin: 3px 0;

    .VCoordinate-item-block {
      display: flex;
      padding: 0 10px;

      .VCoordinate-value {
        // margin-left: 5px;
      }

      .VCoordinate-label {
        text-align: end;
      }
    }

  }

}
</style>
